<template>
    <el-dialog v-model="updateDialog" title="作业批改" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-table :loading="loading" :data="tableData" style="width: 98%;" size="small" row-key="id">
                <el-table-column>
                    <template #default="scope">
                        <div style="display: flex; flex-direction: column;">
                            <p><span>第{{ scope.$index + 1 }}题: </span></p>
                            <div style="margin-left: 2em">{{ scope.row.homeworkTopic }}</div>
                            <p>学生答案：</p>
                            <div style="margin-left: 2em">{{ scope.row.studentAnswer }}</div>
                        </div>
                        <div>
                            <el-radio-group v-model="scope.row.radioValue" prop="judgment">
                                <el-radio fill="#409eff" value="1" size="large" border>正确</el-radio>
                                <el-radio value="2" size="large" border>错误</el-radio>
                            </el-radio-group>
                        </div>
                        <el-col :span="12">
                            <el-form-item label="评语" label-width="80" prop="teacherComments">
                                <el-input type="textarea" autocomplete="off" v-model="scope.row.comment"
                                    style=" width: 600px;" :rows="4" />
                            </el-form-item>
                        </el-col>
                        <el-button @click="resetComment(scope.row)">重置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialog = false">关闭</el-button>
                <el-button @click="update(formRef)" type="primary" >提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js';
import { ElMessage } from "element-plus";

let updateDialog = defineModel('updateDialog');
const emit = defineEmits(['loadData']);
const formRef = ref();
const props = defineProps({
    rowData: {},
    studentId: '',
    courseName: ''
});

let formData = reactive({});
let tableData = reactive([]);
let loading = ref(true);

// 表单校验
const formRules = reactive({});

function loadTable() {
    loading.value = true;
    axios.get("courseHomeworkRecord/selectCheckRecord", {
        params: {
            courseName: props.courseName,
            studentId: props.studentId,
        },
    })
       .then((resp) => {
            loading.value = false;
            const data = resp.data.data;
            tableData = data;
            // 初始化每一行的 radioValue 和 comment
            tableData.forEach(row => {
                row.radioValue = null; // 或者默认值
                row.comment = '';
            });
        });
}

function update() {
    // 构建要更新的数据列表
    const updateDataList = tableData.map(row => ({
        judgment: row.radioValue,
        teacherComments: row.comment,
        homeworkId: row.homeworkId,
        studentId:props.studentId
    }));

    axios.post('/courseHomeworkRecord/update',JSON.stringify(updateDataList) , {
        headers: {
            'Content-Type': 'application/json'
        }
    })
       .then(resp => {
        if (resp.data.message==='选项不能为空') {
            ElMessage.error('选项不能为空')
            return
        }
        if (resp.data.message==='教师评语不能超过255个字符') {
            ElMessage.error('教师评语不能超过255个字符')
            return
        }
            ElMessage({
                message: resp.data.message,
                type: resp.data.code === 200 ? 'success' : "error",
                duration: 1500,
                onClose: function () {
                    updateDialog.value = false;
                    emit('loadTableData');
                    // 清除表单数据
                    tableData.forEach(row => {
                        row.radioValue = null;
                        row.comment = null;
                    });
                }
            });
        })
       .catch(error => {
            console.error('更新失败：', error);
        });
}

// 重置表单校验
const resetComment = (row) => {
    row.radioValue=null
    row.comment=null
}
loadTable();
</script>

<style scoped></style>